<template>
  <div class="rootForget">
    <div class="barBack" @click="$router.push({ name: 'login' })">
      <div style="display: flex; align-items: center; cursor: pointer">
        <el-icon><ArrowLeft /></el-icon>
        <div style="margin-left: 10px">Back</div>
      </div>
    </div>
    <div class="wrap">
      <div class="card" v-if="!changePage">
        <div class="text-title">Forgot Password</div>
        <div class="text-subtitle">{{ 'Please enter your ' + placeholder }}</div>
        <el-form :model="formData" ref="formRef">
          <el-form-item prop="value" :rules="email">
            <el-input
              style="width: 500px; margin-top: 20px"
              v-model="formData"
              :placeholder="placeholder"
              clearable
              @blur="formData = formData ? formData.trim() : ''"
            />
          </el-form-item>
        </el-form>
        <el-button
          @click="handleNextStep"
          style="height: 48px; width: 500px; font-size: 16px; margin-top: 60px"
          type="primary"
          >Next Step</el-button
        >
      </div>
      <div class="card" v-else>
        <div style="width: 500px">
          <div class="text-title">Password Setup</div>
          <div class="text-subtitle">
            We have sent a verification code to the email address of the person in charge
          </div>
          <el-form :model="formPassword" ref="formPasswordRef">
            <el-form-item>
              <div style="display: flex; gap: 15px; margin-top: 20px; width: 100%">
                <el-input
                  v-model="formPassword.verificationCode"
                  placeholder="Verification Code"
                  clearable
                  @blur="
                    formPassword.verificationCode = formPassword.verificationCode
                      ? formPassword.verificationCode.trim()
                      : ''
                  "
                />
                <div class="resendBtn" :class="{ disabledBtn: totalTime }" @click="sendEmail">
                  Resend {{ totalTime }}
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="newPassword" :rules="password">
              <el-input
                v-model="formPassword.newPassword"
                placeholder="New Password"
                show-password
                clearable
                :maxlength="20"
                style="height: 40px; width: 500px"
                @blur="
                  formPassword.newPassword = formPassword.newPassword
                    ? formPassword.newPassword.trim()
                    : ''
                "
              />
            </el-form-item>
          </el-form>
          <!-- type="password" -->
          <el-button
            @click="submit"
            label="Confirm"
            width="100%"
            height="48px"
            style="height: 48px; width: 500px; margin-top: 60px"
            type="primary"
            >Confirm</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { callAsync } from '@/utils';
import { email, password } from '@/utils/formRules';
import MD5 from 'js-md5';
const router = useRouter();
const props = defineProps({
  placeholder: {
    type: String,
    default: 'Business Registration No',
  },
  sendMailApi: {},
  editPasswordApi: {},
});
const emits = defineEmits([]);

let changePage = ref(false);
let totalTime = ref('');
let timer = ref(null);

let formData = ref({});
let formPassword = ref({});

// ref
const formPasswordRef = $ref();
const formRef = $ref();

const handleNextStep = async () => {
  if (!formData.value) {
    return ElMessage.error('Please enter your ' + props.placeholder);
  }
  formRef.validate(async valid => {
    if (valid) {
      sendEmail();
    }
  });
};

const sendEmail = async () => {
  if (totalTime.value === '') {
    try {
      let res = await callAsync(props.sendMailApi, { email: formData.value });
      ElMessage.success(res.msg);
      if (totalTime.value === '') {
        changePage.value = true;
        countDown();
      }
    } catch (error) {}
  }
};

function countDown() {
  totalTime.value = 60;
  timer.value = setInterval(() => {
    totalTime.value--;
    if (totalTime.value < 1) {
      totalTime.value = '';
      clearInterval(timer.value);
    }
  }, 1000);
}

const submit = async () => {
  formPasswordRef.validate(async valid => {
    if (valid) {
      try {
        let res = await callAsync(props.editPasswordApi, {
          newPassword: MD5(formPassword.value.newPassword),
          verificationCode: formPassword.value.verificationCode,
          email: formData.value,
        });
        ElMessage.success(res.msg);
        setTimeout(() => router.push({ name: 'login' }), 1000);
      } catch (error) {
        console.log(error);
      }
    }
  });
};
</script>
<style lang="scss" scoped>
.rootForget {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: rgb(242, 242, 242);
  .barBack {
    height: 50px;
    padding: 0 15px;
    background-color: #fff;
    display: flex;
    align-items: center;
    color: #303133;
    font-size: 20px;
  }
}
.wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  .card {
    width: 60%;
    height: 80%;
    border-radius: 8px;
    border: 1px solid #ebeef5;
    background: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    position: relative;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .text-title {
      height: 50px;
      margin-bottom: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #303133;
    }
    .text-subtitle {
      width: 500px;
      font-size: 20px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #303133;
    }
  }
}
.resendBtn {
  width: 128px;
  height: 40px;
  border-radius: 2px;
  border: 1px solid #ea6756;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #cd2219;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.disabledBtn {
  cursor: not-allowed;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
</style>
